<style>
    .companyFormPhotos {
        /* margin-left:140px; */
        line-height: 38px;
        float: left;
    }

    .companyFormPhotos img {
        cursor: pointer;
        height: 38px;
        width: auto;
        max-width: 200px;
    }

    .warehouseProcessingDescriptionForm .layui-form-label {
        width: 100px;
    }

    .warehouseProcessingDescriptionForm .layui-input-block {
        margin-left: 130px;
    }

</style>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 头部操作栏 -->
            <div class="layui-form lay-header">
                <div class="toolbar">
                    <div class="layui-form-item lay-query-content">
                        <div class="lay-query-box">
                            <div class="query-lt">
                                <div class="layui-inline">
                                    <label class="layui-form-label">选择工艺：</label>
                                    <div class="layui-input-inline mr0">
                                        <select id="processingName" name="processingName" lay-filter="processingName" lay-search lay-verify=""></select id="processingTypeName">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">选择品种：</label>
                                    <div class="layui-input-inline mr0">
                                        <select id="varietyName" name="varietyName" lay-filter="varietyName" lay-search lay-verify=""></select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">选择钢种：</label>
                                    <div class="layui-input-inline mr0">
                                        <select id="markName" name="markName" lay-filter="markName" lay-search lay-verify=""></select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">选择客户：</label>
                                    <div class="layui-input-inline mr0">
                                        <select id="customerName" name="customerName" lay-filter="customerName" lay-search lay-verify=""></select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">状态：</label>
                                    <div class="layui-input-inline mr0">
                                        <select name="isDelete" lay-filter="isDelete">
                                            <option value="">请选择</option>
                                            <option value="0">正常</option>
                                            <option value="1">禁用</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="query-rt">
                                <div class="layui-inline">
                                    <button
                                            class="layui-btn icon-btn color-green"
                                            lay-filter="formSubSearchLog"
                                            lay-submit
                                            layui-form-keyDownSearch="true"
                                    >
                                        查询
                                    </button>
                                    <button
                                            class="layui-btn icon-btn color-white"
                                            lay-filter="resets"
                                            lay-submit
                                    >
                                        重置
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lay-spread-box">
                    <div class="spread-btn">
                        <span class="spread-span">展开</span>
                        <i class="spread-more"></i>
                    </div>
                </div>
                <div class="lay-btn-rows">
                    <div class="lay-btn-box">
                        <div class="lay-btn-lt">
                            <button
                                    id="warehouseOrderBtnAdd"
                                    class="layui-btn icon-btn color-reseda"
                            >
                                添加加工工艺描述
                            </button>
                        </div>
                        <div class="lay-btn-rt"></div>
                    </div>
                </div>
            </div>
            <!-- 表格 -->
            <table
                    class="layui-table"
                    id="warehouseOrderTable"
                    lay-filter="warehouseOrderTable"
            ></table>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<!--<script type="text/html" id="warehouseOrderTableBar">-->
<!--    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="info">详情</a>-->
<!--</script>-->

<!-- 添加表单弹窗 -->
<script type="text/html" id="warehouseProcessingDescriptionForm">
    <form lay-filter="warehouseProcessingDescriptionForm" id="warehouseProcessingDescriptionContForm" class="layui-form warehouseProcessingDescriptionForm model-form">
        <div class="layui-form-item">
            <label class="layui-form-label">选择工艺</label>
            <div class="layui-input-block">
                                <select
                                        id="processingType"
                                        name="processingType"
                                        lay-filter="processingType"
                                        lay-verify="required"
                                        lay-search
                                        required
                                ></select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择品种</label>
            <div class="layui-input-block">
                <select
                        id="productVarietyId"
                        name="productVarietyId"
                        lay-filter="productVarietyId"
                        lay-verify="required"
                        lay-search
                        required
                ></select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择钢种</label>
            <div class="layui-input-block">
                <select
                        id="productMarkId"
                        name="productMarkId"
                        lay-filter="productMarkId"
                        lay-verify="required"
                        lay-search
                        required
                ></select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择客户</label>
            <div class="layui-input-block">
                <select
                        id="customerId"
                        name="customerId"
                        lay-filter="customerId"
                        lay-verify="required"
                        lay-search
                        required
                ></select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input id="remark" name="remark"   type="text" placeholder="备注" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">详情描述</label>
            <div class="layui-input-block">
                <textarea
                        class="layui-textarea"
                        id="details"
                        name="details"
                        lay-filter="details"
                        placeholder="详情描述"
                ></textarea >
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button class="layui-btn" lay-filter="warehouseProcessingDescriptionFormSubmit" type="button" lay-submit>提交</button>
        </div>
    </form>
</script>


<!-- js部分 -->
<script>
    layui.use(
        [
            "layer",
            "form",
            "table",
            "admin",
            "upload",
            "tableTreeDj",
            "config",
            "laydate",
        ],
        function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;
            var table = layui.table;
            var config = layui.config;
            var admin = layui.admin;
            var upload = layui.upload;
            var tableTree = layui.tableTreeDj;
            var laydate = layui.laydate;



            admin.initDataSelect("enterprise/sell/admin/customersInfo/list", {limit: 9999}, "customerName", null, "客户信息", 'customerName', null);
            admin.initDataSelect("warehouse/warehouse/admin/productMark/list", {limit: 9999}, "markName", null, "钢种", 'markName', null);
            admin.initDataSelect("warehouse/warehouse/admin/productVariety/list", {limit: 9999}, "varietyName",  null, "品种", 'varietyName', null);
            admin.initDataSelect("enterprise/dict/admin/dictLabel/list?dictType=warehouse_processingType", {limit: 9999}, "processingName", null, "工艺", 'labelName', null);



            // 渲染表格
            var insTb = table.render({
                elem: "#warehouseOrderTable",
                url: config.base + "warehouse/warehouse/warehouseProcessingDescription/list",
                toolbar: true,
                defaultToolbar: ["filter"],
                page: true,
                cellMinWidth: 100,
                cols: [
                    [
                        {type: "numbers", title: "序号", fixed: "left"},
                        {field: "processingTypeName", title: "适用工艺", align: "center"},
                        {field: "productVarietyName", title: "适用品种", align: "center"},
                        // {field: "customerLevelId", title: "客户级别", align: "center"},
                        {field: "productMarkName", title: "适用钢种", align: "center"},
                        {field: 'customerName', title: '适用客户', align: 'center'},
                        {field: "remark", title: "描述", align: "center"},
                        {
                            field: "isDeleted",
                            title: "状态",
                            align: "center",
                            templet: function (d) {
                                if(d.isDeleted){
                                    return "禁用"
                                }else{
                                    return "正常"
                                }
                            },
                        },
                        // {field: 'creatorName', title: '创建人' , align: 'center'},
                        // {field: "createTime", title: "添加时间", align: "center"},

                        // {
                        //     align: "center",
                        //     toolbar: "#warehouseOrderTableBar",
                        //     title: "操作",
                        //     width: 200,
                        //     fixed: "right",
                        // },
                    ],
                ],
                done: function (res, curr, count) {
                    console.log(res,"data")
                },
            });

            // 工具条点击事件
            table.on("tool(warehouseOrderTable)", function (obj) {
                var data = obj.data;
                if (obj.event === "info") {
                    //详情
                    admin.req(
                        "warehouse/warehouse/settled/info",
                        {id: data.id},
                        (res) => {
                            if (res.code === 200) {
                                let dataCont={...data,...res.data}
                                showEditModel(dataCont);
                            }
                        }
                    );
                }
            });
            //监听排序
            table.on("sort(warehouseOrderTable)", function (obj) {
                table.reload("warehouseOrderTable", {
                    initSort: obj,
                    where: {
                        sort: obj.field,
                        order: obj.type,
                    },
                });
            });
            // 搜索
            form.on("submit(formSubSearchLog)", function (data) {
                insTb.reload({where: data.field, page: {curr: 1}}, "data");
            });

            // 重置搜索
            form.on("submit(resets)", function (data) {
                insTb.reload(
                    {where: admin.resetSearch(data.field), page: {curr: 1}},
                    "data"
                );
            });
            // 添加按钮点击事件
            $("#warehouseOrderBtnAdd").click(function () {
                showEditModel();
            });
            // 显示编辑弹窗
            function showEditModel(data) {
                admin.formOpen({
                    type: 1,
                    area: '640px',
                    offset: '65px',
                    title: data?"加工工艺描述详情":'添加加工工艺描述',
                    content: $("#warehouseProcessingDescriptionForm").html(),
                    success: function () {
                        if(data){
                            form.val('warehouseProcessingDescriptionForm', data);
                            console.log(data)
                            admin.setFormDisable("#warehouseProcessingDescriptionContForm", true);
                            admin.reqSync(
                                "warehouse/warehouse/admin/administration/list",
                                {limit: 9999},
                                function (res) {
                                    layer.closeAll("loading");
                                    if (res.code == 200) {
                                        let info=res.data.filter(item=>item.id==data.factoryId)
                                        if(info.length){
                                            $("#factoryName").val(info[0].name);
                                        }
                                    }
                                },
                                "GET"
                            );
                        }

                        admin.initDataSelect("enterprise/sell/admin/customersInfo/list", {limit: 9999}, "customerId", data ? data.customerId : null, "客户信息", 'customerName', null);
                        admin.initDataSelect("warehouse/warehouse/admin/productMark/list", {limit: 9999}, "productMarkId", data ? data.productMarkId : null, "钢种", 'markName', null);
                        admin.initDataSelect("warehouse/warehouse/admin/productVariety/list", {limit: 9999}, "productVarietyId", data ? data.productVarietyId : null, "品种", 'varietyName', null);
                        admin.initDataSelect("enterprise/dict/admin/dictLabel/list?dictType=warehouse_processingType", {limit: 9999}, "processingType", data ? data.processingType : null, "工艺", 'labelName', null);


                        // 表单提交事件
                        form.on("submit(warehouseProcessingDescriptionFormSubmit)", function (d) {
                            const formData = {...d.field};
                            layer.load(2);
                            admin.req("warehouse/warehouse/warehouseProcessingDescription/add",JSON.stringify(formData),function (res) {
                                    layer.closeAll("loading");
                                    if (res.code == 200) {
                                        layer.msg(res.msg, {icon: 1});
                                        table.reload("warehouseOrderTable", {});
                                        layer.closeAll("page");
                                    } else {
                                        layer.msg(res.msg, {icon: 2});
                                    }
                                },"POST",
                                true,
                                "application/json; charset=utf-8"
                            );
                        });

                        if (data) {
                            admin.initDataSelect("enterprise/sell/admin/customersInfo/list", {limit: 9999}, "trusteeshipcontractId", data ? data.warehouseCustomerId : null, "客户信息", 'customerName', null);
                            admin.initDataSelect("enterprise/sell/admin/contactInfo/list?page=1&limit=9999", {selCustomerId:  data.warehouseCustomerId}, "contactId", data ? data.contactId : null, "联系人", 'name', null);
                            $("#phone").val(data.telephone);
                            $("#mail").val(data.email);
                            $("#contractTime").val(data.createTime);
                        }



                    },
                });
            }

            // option渲染
            function loadSelectHtml(data, tips, htmltarget, type) {
                let html = " <option value>" + tips + "</option>";
                if (!data || data == null) {
                    return;
                }
                for (let i = 0; i < data.length; i++) {
                    if (type == 1) {
                        html += `<option value='${data[i].id}' id='${
                            data[i].id
                        }' data='${JSON.stringify(data[i])}' >${
                            data[i].customerName
                        }</option>`;
                    } else if (type == 2) {
                        html += `<option value='${data[i].id}' id='${
                            data[i].id
                        }' data='${JSON.stringify(data[i])}'>${data[i].markName}</option>`;
                    } else if (type == 3) {
                        html += `<option value='${data[i].id}' id='${data[i].id}'>${data[i].varietyName}</option>`;
                    } else {
                        html += `<option value='${data[i].id}' data='${JSON.stringify(
                            data[i]
                        )}'>${data[i].name}</option>`;
                    }
                }

                $("form select[name='" + htmltarget + "']").html(html);
                form.render("select");
            }

        }
    );
</script>
